import 'package:flutter/material.dart';

/* 在位置变化时创建平滑的动画效果 */
class PositionedStatic extends StatefulWidget {
  const PositionedStatic({super.key});

  @override
  State<PositionedStatic> createState() => _PositionedStaticState();
}

class _PositionedStaticState extends State<PositionedStatic> {
  bool _isMoved = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 840,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.blue, width: 1),
        borderRadius: BorderRadius.circular(8)
      ),
      child: Column(
        children: [
          SizedBox(
            width: double.infinity,
            height: 40,
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.amber[50]
              ),
              onPressed: () {
                setState(() {
                  _isMoved = !_isMoved;
                });
              },
              child: const Text('切换 Positioned')
            ),
          ),

          Container(
            width: double.infinity,
            height: 498,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.black, width: 1),
              borderRadius: BorderRadius.circular(6)
            ),
            child: Stack(
              children: [
                AnimatedPositioned(
                  duration: const Duration(seconds: 1),
                  left: _isMoved ? 200 : 0,
                  top: _isMoved ? 400 : 0,
                  child: Container(
                    width: 30,
                    height: 30,
                    color: Colors.amber[200],
                  ),
                )
              ],
            )
          )
        ],
      ),
    );
  }
}